import React, {useEffect, useState} from "react";
import {Text} from "react-native-elements";
import {Dimensions, ScrollView, StyleSheet, View} from "react-native";
import {SvgXml} from "react-native-svg";
import {checkSvgXml, copySvgXml} from "../libs/svgXml";
import {fontSize_14, fontSize_15, fontSize_20} from "./theme";
import {getChainBaseByChainID, nowWallet} from "./smartxL2Libs/L2_Data";
import {setCopyMsg, timeFormat} from "../libs/utils";
import QRCode from "react-native-qrcode-svg";
import BigNumber from "bignumber.js";
import {checkAddressEq, decodeInputDataHex} from "./smartxL2Libs/L2_utils";
import {getTokenDecimals} from "./smartxL2Libs/smartxL2Web3";
import {ethers} from "ethers";

const {width,height,scale} = Dimensions.get("window");

const L2_transferDetail = ({navigation,route}:any) => {
    const [item,setItem] = useState(route?.params?.item);
    const [name,setName] = useState(route?.params?.name)
    const [tokenAddress,setTokenAddress] = useState(route?.params?.tokenAddress || "")
    const [decimals,setDecimals] = useState("9")
    const [net,setNet] = useState()
    useEffect(()=>{
        navigation.setOptions({
            title:"交易详情"
        })
        getNowNet();
        console.log(nowWallet.address===item.from)
        console.log(typeof item.from,item.from)
        console.log(typeof nowWallet.address,nowWallet.address)
    },[])

    const getNowNet = async () => {
        let netTemp = await getChainBaseByChainID(nowWallet.chainID);
        setNet(netTemp)
    }

    return (
        <View style={styles.container}>
            <ScrollView style={{width:"100%"}} contentContainerStyle={{width:"100%",alignItems:"center"}}>
                <View style={{width:50,height:50,borderRadius:50,backgroundColor:"#02a977",alignItems:"center",justifyContent:"center",zIndex:2}}>
                    <SvgXml xml={checkSvgXml("white")} width={40} height={40}/>
                </View>
                <View style={styles.mainContainer}>
                    <Text style={styles.mainSmallTitle}>转账成功</Text>
                    <Text style={styles.transferAmount}>{checkAddressEq(item.from,nowWallet.address)?"-":"+"}{!tokenAddress?ethers.utils.formatEther(item.value):(new BigNumber(item.value).div(new BigNumber(10).pow(item.tokenDecimal)).toFixed())} {name}</Text>
                    <Text style={styles.title}>发款方</Text>
                    <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                        <Text style={styles.content}>{item.from.slice(0,14)}...{item.from.slice(-14)}</Text>
                        <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(item.from)}/>
                    </View>
                    <Text style={styles.title}>收款方</Text>
                    <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                        <Text style={styles.content}>{item.to.slice(0,14)}...{item.to.slice(-14)}</Text>
                        <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(item.to)}/>
                    </View>
                    <Text style={styles.title}>矿工费用</Text>
                    <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                        <Text style={styles.content}>{new BigNumber(item.gasPrice).div("1000000000000000000").multipliedBy(item.gas).toFixed()} SL2</Text>
                    </View>
                    <Text style={styles.title}>备注</Text>
                    <View style={{flexDirection:"row",alignItems:"center",marginBottom:20,paddingBottom:10,borderBottomWidth:5/scale,borderBottomColor:"#f9f9f9"}}>
                        <Text style={styles.content}>{decodeInputDataHex(item.input)}</Text>
                        {
                            decodeInputDataHex(item.input)?
                                <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(decodeInputDataHex(item.input))}/>:null
                        }
                    </View>
                    <View style={{flexDirection:"row",alignItems:"center"}}>
                        <View style={{width:"65%"}}>
                            <Text style={styles.title}>哈希值</Text>
                            <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                                <Text style={styles.content}>{item.hash.slice(0,8)}...{item.hash.slice(-8)}</Text>
                                <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(item.hash)}/>
                            </View>
                            <Text style={styles.title}>区块号</Text>
                            <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                                <Text style={styles.content}>{item.blockNumber}</Text>
                                <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(item.blockNumber)}/>
                            </View>
                            <Text style={styles.title}>交易时间</Text>
                            <View style={{flexDirection:"row",alignItems:"center",paddingBottom:10}}>
                                <Text style={styles.content}>{timeFormat(item.timeStamp*1000)}</Text>
                                <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>setCopyMsg(item.timeStamp)}/>
                            </View>
                        </View>
                        {
                            net?
                                <View >
                                    <QRCode value={net.blockNet+`/tx/${item.hash}`} size={width*0.35*0.7} />
                                    <View style={{alignItems:"center",marginTop:10}}>
                                        <Text style={styles.title}>查询链接 <SvgXml xml={copySvgXml} width={14} height={14} style={{marginLeft:10}} onPress={()=>{
                                            setCopyMsg(net.blockNet+`/tx/${item.hash}`)
                                        }}/></Text>
                                    </View>
                                </View>:null
                        }
                    </View>
                </View>
            </ScrollView>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "#f6f6f6",
        paddingTop:50,
    },
    mainContainer:{
        padding:20,
        paddingTop:40,
        borderRadius:5,
        backgroundColor:"white",
        width:"100%",
        marginTop:-35,
    },
    mainSmallTitle:{
        fontSize:fontSize_14,
        color:"#02a977",
        textAlign:"center",
    },
    transferAmount:{
        fontSize:fontSize_20,
        lineHeight:60,
        textAlign:"center",
    },
    title:{
        fontSize:fontSize_14,
        color:"#ababab",
        lineHeight:20,
    },
    content:{
        fontSize:fontSize_15,
        lineHeight:25,
        flexWrap:"wrap",
        maxWidth:"95%"
    }
})
export default L2_transferDetail;


